<template>
	<uni-nav-bar :fixed='fixed'>
		<view class="searchHeader">
			<input type="text" placeholder="请输入你需要的关键词" v-model="keyword" placeholder-class='textPlaceholder' maxlength='60'  @focus="focus"  @confirm='confirm' confirm-type='search'/>
			<text @tap="back">取消</text>
			<image src="/static/svg/delete2.svg" @tap="toDeleKeyWord" v-if="keyword"></image>
		</view>
	</uni-nav-bar>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniNavBar
		},
		props: {
			value: {
				type:String,
				default:""
			},
			fixed:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				keyword:this.value
			};
		},
		watch: {
			keyword(newValue, oldValue) {
				this.$emit('input',newValue)
			}
		},
		methods: {
			back() {
				this.$emit('back')
			},
			toDeleKeyWord(){
				this.keyword=""
				// this.$emit("deleWord")
				this.$emit('input',this.keyword)
			},
			confirm(){
				this.$emit('confirm',this.keyword)
			},
			focus(){
				this.$emit('focus',this.keyword)
			}
		},
	}
</script>

<style lang="scss" scoped>
.searchHeader{
	height: 88rpx;
	position: absolute;
	width: 750rpx;
	top: 0;
	left: 0;
	z-index: 997;
	display: flex;
	align-items: center;
	input{
		height: 70rpx;
		width: 590rpx;
		background-color: #F5F5F5;
		border-radius: 32rpx;
		padding: 0 26rpx;
		color: #333333;
		font-size: 32rpx;
		letter-spacing: 1rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
	}
	text{
		color: #A66354;
		font-size: 32rpx;
		letter-spacing: 1rpx;
		margin-left: 34rpx;
	}
	image{
		position: absolute;
		height: 36rpx;
		width: 36rpx;
		display: block;
		right: 150rpx;
	}
}
.textPlaceholder{
	font-size: 28rpx;
	color: #999999;
	letter-spacing: 1rpx;
}
</style>
